<script setup>
import EzForm from "@/components/form/index.vue";
import EzTable from "@/components/table/index.vue";
import EzModal from "@/components/modal/index.vue";
import { searchForm } from "@/views/main/system/user/config";
import { tableColumns } from "@/views/main/system/user/config";
import { reactive, ref } from "vue";
import { getUserList, searchUser } from "@/service/user";
import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue";

const formOriginData = {};
for (const item of searchForm) {
  formOriginData[item.field] = "";
}

const formData = reactive(formOriginData);

getUserList().then(r => {
  userList.value = r;
});

const clickReset = () => {
  Object.keys(formData).map(key => {
    formData[key] = "";
  });
};

const userList = ref([]);
const clickSearch = () => {
  searchUser({ ...formData }).then(r => {
    userList.value = r;
  });
};

const showModal = ref(false);

const addData = () => {
  showModal.value = true;
  console.log("....");
};
</script>

<template>
  <div class="search">
    <ez-form :search-form-config="searchForm" v-model="formData" v-permissions="'system:user:query'">
      <template #footer>
        <div class="btn">
          <a-button @click="clickReset">重置</a-button>
          <a-button @click="clickSearch" style="margin-left: 10px" type="primary">
            <template #icon><SearchOutlined /></template>
            搜索</a-button
          >
        </div>
      </template>
    </ez-form>
  </div>
  <div class="list">
    <a-card title="用户列表">
      <template #extra>
        <a-button type="primary" @click="addData" v-permissions="'system:user:create'">
          <template #icon><plus-outlined /></template>
          新增</a-button
        >
      </template>
      <ez-table :table-columns="tableColumns" :table-data="userList" />
    </a-card>
  </div>

  <ez-modal title="新增用户" />
</template>

<style scoped>
.list {
  margin-top: 20px;
  border: 1px solid lavender;
}
.btn {
  margin-left: 10px;
}
</style>
